<template>
  <div>
    <!-- 头部 -->
    <div class="btn_wrapper">
      <span style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <button
        type="button"
        class="el-button el-button--success el-button--small"
        @click="$router.push('/questions/new')"
      >
        <i class="el-icon-edit"></i>
        <span>新增试题</span>
      </button>
    </div>
    <!-- 下拉选择框模块 -->
    <el-form ref="questionsRefs" :model="searchForm">
      <!-- 第一行 -->
      <el-row>
        <!-- 学科 -->
        <el-col :span="6">
          <el-form-item prop="subjectID" label="学科" label-width="80px">
            <el-select
              v-model="searchForm.subjectID"
              placeholder="请选择"
              @change="onChange($event)"
              size="small"
            >
              <el-option
                v-for="(item, index) in subList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 二级目录 -->
        <el-col :span="6">
          <el-form-item prop="catalogID" label="二级目录" label-width="80px">
            <el-select
              v-model="searchForm.catalogID"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="(item, index) in twoSubList"
                :key="index"
                :label="item.directoryName"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签 -->
        <el-col :span="6">
          <el-form-item prop="tag" label="标签" label-width="80px">
            <el-select
              v-model="searchForm.tag"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="(item, index) in tagLists"
                :key="index"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="keyword" label="关键字" label-width="80px">
            <el-input
              v-model="searchForm.keyword"
              placeholder="根据题干搜索"
              size="small"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <!-- 试题类型 -->
        <el-col :span="6">
          <el-form-item prop="quest" label="试题类型" label-width="80px">
            <el-select
              v-model="searchForm.quest"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="(item, index) in questionType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 难度 -->
        <el-col :span="6">
          <el-form-item prop="diff" label="难度" label-width="80px">
            <el-select
              v-model="searchForm.diff"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="(item, index) in difficulty"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 方向 -->
        <el-col :span="6">
          <el-form-item prop="dir" label="方向" size="small" label-width="80px">
            <el-select
              v-model="searchForm.dir"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 录入人 -->
        <el-col :span="6">
          <el-form-item prop="creatorID" label="录入人" label-width="80px">
            <el-select
              v-model="searchForm.creatorID"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="(item, index) in simpleName"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item prop="remarks" label="题目备注" label-width="80px">
            <el-input v-model="searchForm.remarks" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="shortName" label="企业简称" label-width="80px">
            <el-input v-model="searchForm.shortName" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <!-- 城市 -->
        <el-col :span="6">
          <el-row>
            <el-form-item prop="city" label="城市" label-width="80px">
              <el-select
                v-model="city"
                style="width: 48%"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <img style="width: 2%" />

              <el-select
                v-model="citysDistrict"
                style="width: 50%"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in citysDistrictList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
        <!-- 两个按钮 -->
        <el-col :span="6">
          <div class="el-form-item__content relative_right">
            <el-button
              type="button"
              class="el-button btn1 el-button--default el-button--small"
              @click="ClearAll"
            >
              <span>清除</span>
            </el-button>
            <button
              type="button"
              class="el-button btn2 el-button--primary el-button--small"
              @click="handleFilter"
            >
              <span>搜索</span>
            </button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects' // 学科简单列表
import { list, directorysSimple } from '@/api/hmmm/directorys' // 目录列表
import { list as taglist } from '@/api/hmmm/tags' // 标签
import { questionType, difficulty, direction } from '@/api/hmmm/constants' // 第二行需要的接口
import { citys, provinces } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      value: '',
      simpleName: ['超级管理员', '录入管理员'], // 录入人
      querestlist: [],
      cityList: [], // 城市列表
      citysDistrictList: [], // 城市区
      directorysList: [], // 目录列表
      subList: [], // 学科列表
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      twoSubList: [], // 二级目录
      tagLists: [], // 标签
      basedList: [], // 基础题库列表
      city: '', // 城市
      citysDistrict: '', // 城市区

      searchForm: {
        subjectID: '', // 学科
        creatorID: '', // 录入人
        catalogID: '', // 二级目录
        tag: '', // 标签
        quest: '', // 题型
        questionType: '', // 试题类型
        difficulty: '', // 难度
        diff: '', // 难度
        direction: '',
        dir: '', // 方向
        remarks: '', // 题目备注
        shortName: '', // 企业简介
        province: '',
        city: '',
        keyword: ''
      }
    }
  },
  methods: {
    // 学科列表改变事件
    async subChange (id) {
      const { data } = await this.getTwoSubList({ subjectID: id })
      this.twoSubList = data.items
    },
    async getDirectorysSimpleList () {
      const { data } = await directorysSimple()
      this.directorysList = data
    },
    getCityList () {
      this.cityList = provinces()
    },
    // 获取学科列表
    async getSubList () {
      try {
        const { data } = await simple()
        this.subList = data
      } catch (err) {
        this.$message.fail('获取学科失败')
      }
    },
    // 获取二级目录
    async onChange (id) {
      const { data } = await list(
        { subjectID: id }
      )
      this.twoSubList = data.items
    },
    // 获取标签
    async tagListChannels () {
      try {
        const { data } = await taglist()
        this.tagLists = data.items
      } catch (err) {
        this.$message.fail('获取标签失败')
      }
    },
    // 获取试题类型
    async basisType () {
      try {
        const { data } = await list()
        this.basedList = data
      } catch (err) {
        this.$mesage.fail('获取试题类型失败')
      }
    },
    // 清除
    ClearAll () {
      this.$refs.questionsRefs.resetFields()
      this.city = ''
      this.citysDistrict = ''
      this.$emit('Clear')
    },
    // 搜索
    handleFilter () {
      this.$emit('Search', this.searchForm)
    }
  },
  computed: {
    getAll () {
      return this.searchForm
    }
  },
  created () {
    this.getSubList()
    this.onChange()
    this.tagListChannels()
    this.basisType()
    this.getDirectorysSimpleList()
    this.getCityList(this.city)
  },
  watch: {
    city () {
      this.citysDistrictList = citys(this.city)
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  border: 0;
}

.btn_wrapper {
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.el-select {
  width: 100%;
}

.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.relative_right {
  position: relative;
  .btn2 {
    position: absolute;
    top: 0;
    right: 0px;
  }
  .btn1 {
    position: absolute;
    top: 0;
    right: 63px;
  }
}
</style>
